<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>双向奔赴 - 倒计时</title>
    <link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Playfair+Display:wght@400;700&family=Lato:wght@300;400;700&display=swap" rel="stylesheet">
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            --primary-color: #F8F4E6;
            --accent-color: #D4AF37;
            --text-color: #3E2723;
            --emphasis-color: #C62828;
            --secondary-color: #8D6E63;
            --light-accent: #FFE082;
            --romantic-pink: #ff6b9d;
            --romantic-red: #e74c3c;
            --night-sky: #1a1a2e;
            --dawn-orange: #f39c12;
            --dream-blue: #3498db;
        }

        body {
            font-family: 'Lato', 'Source Han Sans', sans-serif;
            line-height: 1.6;
            color: var(--text-color);
            background: linear-gradient(135deg,
                rgba(26, 26, 46, 0.9) 0%,
                rgba(22, 33, 62, 0.8) 50%,
                rgba(15, 52, 96, 0.7) 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow-x: hidden;
            position: relative;
        }

        /* 背景装饰和粒子效果 */
        .background-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            overflow: hidden;
        }

        .romantic-bg {
            position: absolute;
            width: 100%;
            height: 100%;
        }

        .bg-svg {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }

        .floating-petals {
            position: absolute;
            width: 100%;
            height: 100%;
            overflow: hidden;
            pointer-events: none;
        }

        .particle-field {
            position: absolute;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }

        /* 背景装饰 */
        .background-decoration {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1;
        }

        .floating-hearts {
            position: absolute;
            width: 100%;
            height: 100%;
        }

        .heart {
            position: absolute;
            color: rgba(198, 40, 40, 0.1);
            animation: float 8s infinite ease-in-out;
            font-size: 1.5rem;
        }

        .heart:nth-child(1) { top: 10%; left: 10%; animation-delay: 0s; }
        .heart:nth-child(2) { top: 20%; right: 15%; animation-delay: 2s; }
        .heart:nth-child(3) { top: 60%; left: 20%; animation-delay: 4s; }
        .heart:nth-child(4) { top: 80%; right: 10%; animation-delay: 6s; }
        .heart:nth-child(5) { top: 40%; left: 50%; animation-delay: 1s; }
        .heart:nth-child(6) { top: 70%; right: 30%; animation-delay: 3s; }

        @keyframes float {
            0%, 100% {
                transform: translateY(0) rotate(0deg);
                opacity: 0.3;
            }
            25% {
                transform: translateY(-20px) rotate(5deg);
                opacity: 0.5;
            }
            50% {
                transform: translateY(10px) rotate(-5deg);
                opacity: 0.2;
            }
            75% {
                transform: translateY(-10px) rotate(3deg);
                opacity: 0.4;
            }
        }

        /* 主容器 */
        .container {
            max-width: 900px;
            width: 100%;
            padding: 2rem;
            text-align: center;
            z-index: 10;
            position: relative;
        }

        /* 标题 */
        .main-title {
            font-family: 'Ma Shan Zheng', cursive;
            font-size: 3.5rem;
            color: var(--emphasis-color);
            margin-bottom: 1rem;
            text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.1);
            animation: titleGlow 3s ease-in-out infinite alternate;
        }

        @keyframes titleGlow {
            0% {
                text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.1);
            }
            100% {
                text-shadow: 3px 3px 15px rgba(198, 40, 40, 0.3);
            }
        }

        .subtitle {
            font-size: 1.5rem;
            color: var(--secondary-color);
            margin-bottom: 3rem;
            font-style: italic;
        }

        /* 倒计时容器 */
        .countdown-container {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(15px);
            border: 2px solid var(--accent-color);
            border-radius: 25px;
            padding: 3rem;
            margin: 3rem 0;
            box-shadow: 0 15px 50px rgba(212, 175, 55, 0.2);
            position: relative;
            overflow: hidden;
        }

        .countdown-container::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg,
                transparent 30%,
                rgba(212, 175, 55, 0.1) 50%,
                transparent 70%);
            animation: shimmer 3s infinite;
        }

        @keyframes shimmer {
            0% {
                transform: translateX(-100%) translateY(-100%) rotate(45deg);
            }
            100% {
                transform: translateX(100%) translateY(100%) rotate(45deg);
            }
        }

        .countdown-title {
            font-family: 'Ma Shan Zheng', cursive;
            font-size: 4rem;
            color: var(--romantic-pink);
            margin-bottom: 2rem;
            text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3);
            animation: titleGlow 3s ease-in-out infinite alternate;
        }

        .countdown-subtitle {
            font-size: 1.5rem;
            color: var(--light-accent);
            margin-bottom: 3rem;
            font-style: italic;
        }

        /* 曼殊沙华装饰 */
        .flower-decoration {
            position: absolute;
            top: -50px;
            right: -30px;
            opacity: 0.6;
            animation: float 6s ease-in-out infinite;
        }

        .man-shu-sha-hua {
            filter: drop-shadow(0 0 20px rgba(255, 107, 157, 0.3));
        }

        @keyframes titleGlow {
            0% {
                text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3),
                             0 0 20px rgba(255, 107, 157, 0.3);
            }
            100% {
                text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3),
                             0 0 30px rgba(255, 107, 157, 0.5);
            }
        }

        /* 倒计时显示 */
        .countdown-display {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 2rem;
            margin-bottom: 2rem;
        }

        .time-unit {
            text-align: center;
            position: relative;
        }

        .time-value {
            font-family: 'Playfair Display', serif;
            font-size: 4rem;
            font-weight: 700;
            color: var(--emphasis-color);
            display: block;
            line-height: 1;
            margin-bottom: 0.5rem;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
            animation: pulse 2s ease-in-out infinite;
            background: linear-gradient(45deg, var(--emphasis-color), var(--romantic-pink));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        @keyframes pulse {
            0%, 100% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.05);
            }
        }

        .time-label {
            font-size: 1rem;
            color: var(--secondary-color);
            text-transform: uppercase;
            letter-spacing: 2px;
            font-weight: 500;
        }

        /* 见面信息 */
        .meeting-info {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(15px);
            border-radius: 20px;
            padding: 2rem;
            margin: 3rem 0;
            border: 1px solid rgba(255, 215, 0, 0.3);
            max-width: 500px;
            margin-left: auto;
            margin-right: auto;
        }

        .info-item {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1rem;
            margin: 1rem 0;
            text-align: center;
        }

        .info-icon {
            color: var(--light-accent);
            flex-shrink: 0;
        }

        .info-text {
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .info-text strong {
            display: block;
            color: var(--light-accent);
            font-size: 1.2rem;
            margin-bottom: 0.3rem;
            text-align: center;
            font-family: 'Ma Shan Zheng', cursive;
        }

        .info-text span {
            color: var(--primary-color);
            font-size: 1.1rem;
            text-align: center;
        }

        /* 温馨提示 */
        .warm-message {
            background: rgba(248, 244, 230, 0.9);
            border-radius: 20px;
            padding: 2.5rem;
            margin: 3rem 0;
            border-left: 5px solid var(--emphasis-color);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        }

        .warm-message-text {
            font-size: 1.3rem;
            line-height: 1.8;
            color: var(--text-color);
            font-family: 'Playfair Display', serif;
        }

        .warm-message-text .highlight {
            color: var(--emphasis-color);
            font-weight: 600;
            font-family: 'Ma Shan Zheng', cursive;
            font-size: 1.5rem;
            display: block;
            margin-top: 1rem;
        }

        /* 装饰元素 */
        .decorative-element {
            margin: 2rem 0;
            font-size: 2rem;
            color: var(--accent-color);
            opacity: 0.6;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            body {
                padding: 1rem 0;
            }

            .container {
                padding: 1rem;
            }

            .main-title {
                font-size: 2.2rem;
                margin-bottom: 0.8rem;
            }

            .subtitle {
                font-size: 1.1rem;
                margin-bottom: 2rem;
            }

            .countdown-container {
                padding: 1.5rem;
                margin: 2rem 0;
                border-radius: 20px;
            }

            .countdown-title {
                font-size: 1.6rem;
                margin-bottom: 1.5rem;
            }

            .countdown-display {
                gap: 0.8rem;
                grid-template-columns: repeat(4, 1fr);
            }

            .time-unit {
                min-width: 70px;
            }

            .time-value {
                font-size: 2.2rem;
                line-height: 1.1;
                margin-bottom: 0.3rem;
            }

            .time-label {
                font-size: 0.8rem;
                letter-spacing: 1px;
            }

            .meeting-info {
                padding: 1.5rem;
                margin: 2rem 0;
                border-radius: 15px;
            }

            .meeting-detail {
                font-size: 1.1rem;
                margin: 0.8rem 0;
            }

            .meeting-detail strong {
                font-size: 1.2rem;
            }

            .decorative-element {
                font-size: 1.5rem;
                margin: 1rem 0;
            }

            .warm-message {
                padding: 1.5rem;
                margin: 2rem 0;
                border-radius: 15px;
            }

            .warm-message-text {
                font-size: 1rem;
                line-height: 1.6;
            }

            .warm-message-text .highlight {
                font-size: 1.2rem;
                margin-top: 0.8rem;
            }

            .heart {
                font-size: 1.2rem;
            }

            .falling-heart {
                font-size: 1rem;
            }
        }

        /* 超小屏幕适配 */
        @media (max-width: 480px) {
            .main-title {
                font-size: 1.8rem;
            }

            .subtitle {
                font-size: 1rem;
            }

            .countdown-container {
                padding: 1rem;
            }

            .countdown-title {
                font-size: 1.4rem;
                margin-bottom: 1rem;
            }

            .countdown-display {
                gap: 0.5rem;
            }

            .time-unit {
                min-width: 60px;
            }

            .time-value {
                font-size: 1.8rem;
                margin-bottom: 0.2rem;
            }

            .time-label {
                font-size: 0.7rem;
                letter-spacing: 0.5px;
            }

            .meeting-info {
                padding: 1rem;
            }

            .meeting-detail {
                font-size: 1rem;
            }

            .meeting-detail strong {
                font-size: 1.1rem;
            }

            .warm-message {
                padding: 1rem;
            }

            .warm-message-text {
                font-size: 0.95rem;
            }

            .warm-message-text .highlight {
                font-size: 1.1rem;
            }
        }

        /* 横屏模式适配 */
        @media (max-width: 768px) and (orientation: landscape) {
            .container {
                padding: 0.5rem 1rem;
            }

            .main-title {
                font-size: 2rem;
                margin-bottom: 0.5rem;
            }

            .subtitle {
                font-size: 1rem;
                margin-bottom: 1rem;
            }

            .countdown-container {
                padding: 1rem;
                margin: 1rem 0;
            }

            .countdown-title {
                font-size: 1.4rem;
                margin-bottom: 1rem;
            }

            .time-value {
                font-size: 2rem;
            }

            .meeting-info {
                padding: 1rem;
                margin: 1rem 0;
            }

            .warm-message {
                padding: 1rem;
                margin: 1rem 0;
            }
        }

        /* 加载动画 */
        .fade-in {
            animation: fadeIn 1.5s ease-in;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* 爱心飘落效果 */
        .falling-hearts {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 2;
        }

        .falling-heart {
            position: absolute;
            color: rgba(198, 40, 40, 0.6);
            animation: fall 10s linear infinite;
            font-size: 1.2rem;
        }

        @keyframes fall {
            0% {
                transform: translateY(-100px) rotate(0deg);
                opacity: 0;
            }
            10% {
                opacity: 1;
            }
            90% {
                opacity: 1;
            }
            100% {
                transform: translateY(calc(100vh + 100px)) rotate(360deg);
                opacity: 0;
            }
        }

        /* 粒子效果 */
        .particle {
            position: absolute;
            background: var(--romantic-pink);
            border-radius: 50%;
            opacity: 0.6;
            pointer-events: none;
            animation: particleFloat 10s infinite ease-in-out;
        }

        @keyframes particleFloat {
            0% {
                transform: translateY(100vh) translateX(0) scale(0);
                opacity: 0;
            }
            10% {
                opacity: 0.6;
                transform: translateY(80vh) translateX(10px) scale(1);
            }
            90% {
                opacity: 0.6;
                transform: translateY(10vh) translateX(-10px) scale(1);
            }
            100% {
                transform: translateY(-10vh) translateX(0) scale(0);
                opacity: 0;
            }
        }

        /* 浮动花瓣 */
        .floating-petal {
            position: absolute;
            font-size: 1.5rem;
            opacity: 0.7;
            animation: petalFall 15s linear infinite;
            pointer-events: none;
        }

        @keyframes petalFall {
            0% {
                transform: translateY(-100px) rotate(0deg);
                opacity: 0;
            }
            10% {
                opacity: 0.7;
            }
            90% {
                opacity: 0.7;
            }
            100% {
                transform: translateY(calc(100vh + 100px)) rotate(360deg);
                opacity: 0;
            }
        }

        /* 浪漫消息样式 */
        .romantic-message {
            text-align: center;
            padding: 2rem;
            background: rgba(255, 107, 157, 0.1);
            border-radius: 20px;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 107, 157, 0.2);
            margin-top: 2rem;
        }

        .romantic-message p {
            font-size: 1.2rem;
            line-height: 1.8;
            color: var(--primary-color);
            margin-bottom: 1rem;
        }

        .romantic-message .highlight-text {
            color: var(--romantic-pink);
            font-weight: 600;
            font-size: 1.4rem;
            font-family: 'Ma Shan Zheng', cursive;
            display: block;
            margin-top: 1rem;
        }

        /* 移动端文字居中优化 */
        @media (max-width: 768px) {
            .info-item {
                flex-direction: column;
                gap: 0.8rem;
                padding: 1rem 0;
            }

            .info-text {
                width: 100%;
            }

            .info-text strong {
                font-size: 1.1rem;
            }

            .info-text span {
                font-size: 1rem;
            }

            .meeting-info {
                padding: 1.5rem;
                margin: 2rem 0;
            }

            .romantic-message {
                padding: 1.5rem;
                margin: 2rem 0;
            }
        }
    </style>
</head>
<body>
    <!-- 背景装饰和粒子效果 -->
    <div class="background-container">
        <div class="floating-petals" id="petalsContainer"></div>
        <div class="particle-field" id="particleField"></div>
        <div class="romantic-bg">
            <!-- SVG浪漫背景 -->
            <svg class="bg-svg" viewBox="0 0 1920 1080" preserveAspectRatio="none">
                <defs>
                    <linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
                        <stop offset="0%" style="stop-color:#1a1a2e;stop-opacity:1" />
                        <stop offset="50%" style="stop-color:#16213e;stop-opacity:1" />
                        <stop offset="100%" style="stop-color:#0f3460;stop-opacity:1" />
                    </linearGradient>
                    <radialGradient id="moonGlow">
                        <stop offset="0%" style="stop-color:#fff;stop-opacity:0.8" />
                        <stop offset="50%" style="stop-color:#ffd700;stop-opacity:0.3" />
                        <stop offset="100%" style="stop-color:#ff6b6b;stop-opacity:0.1" />
                    </radialGradient>
                </defs>
                <rect width="1920" height="1080" fill="url(#skyGradient)"/>
                <circle cx="1600" cy="200" r="80" fill="url(#moonGlow)" opacity="0.6"/>
                <path d="M0,600 Q400,550 800,600 T1600,600 L1920,1080 L0,1080 Z" fill="#1a1a2e" opacity="0.3"/>
                <path d="M0,700 Q300,650 600,700 T1200,700 L1920,1080 L0,1080 Z" fill="#16213e" opacity="0.4"/>
            </svg>
        </div>
    </div>

    <!-- 飘落的爱心 -->
    <div class="falling-hearts" id="fallingHearts"></div>

    <!-- 主容器 -->
    <div class="container">
        <!-- 标题 -->
        <header class="fade-in" data-aos="fade-down" data-aos-duration="1500">
            <h1 class="main-title">双向奔赴</h1>
        </header>

        <!-- 倒计时容器 -->
        <section class="countdown-container fade-in" data-aos="zoom-in" data-aos-duration="2000" data-aos-delay="300">
            <!-- SVG装饰：曼殊沙华 -->
            <div class="flower-decoration">
                <svg class="man-shu-sha-hua" viewBox="0 0 200 400" width="150" height="300">
                    <defs>
                        <linearGradient id="petalGradient" x1="0%" y1="0%" x2="100%" y2="100%">
                            <stop offset="0%" style="stop-color:#ff6b9d;stop-opacity:1" />
                            <stop offset="100%" style="stop-color:#c44569;stop-opacity:1" />
                        </linearGradient>
                        <linearGradient id="leafGradient" x1="0%" y1="0%" x2="100%" y2="100%">
                            <stop offset="0%" style="stop-color:#2ecc71;stop-opacity:1" />
                            <stop offset="100%" style="stop-color:#27ae60;stop-opacity:1" />
                        </linearGradient>
                    </defs>
                    <!-- 花朵 -->
                    <g class="flower-group" transform="translate(100, 80)">
                        <ellipse cx="0" cy="-30" rx="25" ry="40" fill="url(#petalGradient)" transform="rotate(0)" opacity="0.8"/>
                        <ellipse cx="0" cy="-30" rx="25" ry="40" fill="url(#petalGradient)" transform="rotate(45)" opacity="0.8"/>
                        <ellipse cx="0" cy="-30" rx="25" ry="40" fill="url(#petalGradient)" transform="rotate(90)" opacity="0.8"/>
                        <ellipse cx="0" cy="-30" rx="25" ry="40" fill="url(#petalGradient)" transform="rotate(135)" opacity="0.8"/>
                        <circle cx="0" cy="0" r="15" fill="#ffd700"/>
                        <line x1="0" y1="15" x2="0" y2="250" stroke="#2ecc71" stroke-width="4"/>
                    </g>
                    <!-- 叶子 -->
                    <ellipse cx="70" cy="200" rx="30" ry="50" fill="url(#leafGradient)" transform="rotate(30 70 200)" opacity="0.7"/>
                    <ellipse cx="130" cy="250" rx="25" ry="40" fill="url(#leafGradient)" transform="rotate(-20 130 250)" opacity="0.7"/>
                </svg>
            </div>

            <p class="countdown-subtitle">曼殊沙华的等待，终将在花开时相见</p>
            <div class="countdown-display">
                <div class="time-unit">
                    <span class="time-value" id="days">0</span>
                    <span class="time-label">天</span>
                </div>
                <div class="time-unit">
                    <span class="time-value" id="hours">0</span>
                    <span class="time-label">小时</span>
                </div>
                <div class="time-unit">
                    <span class="time-value" id="minutes">0</span>
                    <span class="time-label">分钟</span>
                </div>
                <div class="time-unit">
                    <span class="time-value" id="seconds">0</span>
                    <span class="time-label">秒</span>
                </div>
            </div>
        </section>

        <!-- 见面信息 -->
        <section class="meeting-info fade-in" data-aos="fade-up" data-aos-duration="2000" data-aos-delay="600">
            <div class="info-item">
                <svg class="info-icon" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
                </svg>
                <div class="info-text">
                    <strong>时间</strong>
                    <span>2025年10月26日 上午11:21</span>
                </div>
            </div>
            <div class="info-item">
                <svg class="info-icon" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
                </svg>
                <div class="info-text">
                    <strong>地点</strong>
                    <span>徐州东站</span>
                </div>
            </div>
        </section>

        <!-- 温馨提示 -->
        <section class="romantic-message fade-in" data-aos="fade-up" data-aos-duration="2000" data-aos-delay="900">
            <p>曼殊沙华花开叶落，花叶永不相见</p>
            <p>但我们的爱，终将跨越时空的阻隔</p>
            <p class="highlight-text">在最美的时刻，热烈重逢 💕</p>
        </section>
    </div>

    <!-- Scripts -->
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <script>
        // 初始化AOS动画库
        AOS.init({
            duration: 1000,
            once: true,
            offset: 100,
            easing: 'ease-out-quart'
        });

        // 初始化粒子效果和花瓣效果
        initParticleEffects();
        initFloatingPetals();

        // 粒子效果
        function initParticleEffects() {
            const particleField = document.getElementById('particleField');
            if (!particleField) return;

            function createParticle() {
                const particle = document.createElement('div');
                particle.className = 'particle';
                particle.style.cssText = `
                    position: absolute;
                    background: var(--romantic-pink);
                    border-radius: 50%;
                    opacity: 0.6;
                    pointer-events: none;
                    animation: particleFloat 10s infinite ease-in-out;
                `;

                const size = Math.random() * 6 + 2;
                particle.style.width = size + 'px';
                particle.style.height = size + 'px';
                particle.style.left = Math.random() * 100 + '%';

                const duration = Math.random() * 10 + 5;
                particle.style.animationDuration = duration + 's';

                particleField.appendChild(particle);

                setTimeout(() => {
                    particle.remove();
                }, duration * 1000);
            }

            setInterval(createParticle, 800);

            for (let i = 0; i < 10; i++) {
                setTimeout(createParticle, i * 100);
            }
        }

        // 浮动花瓣效果
        function initFloatingPetals() {
            const petalsContainer = document.getElementById('petalsContainer');
            if (!petalsContainer) return;

            const petals = ['🌸', '🌺', '🌷', '🌹', '💮', '🏵️'];

            function createPetal() {
                const petal = document.createElement('div');
                petal.className = 'floating-petal';
                petal.textContent = petals[Math.floor(Math.random() * petals.length)];
                petal.style.cssText = `
                    position: absolute;
                    left: ${Math.random() * 100}%;
                    font-size: ${Math.random() * 1.5 + 1}rem;
                    opacity: 0.7;
                    animation: petalFall 15s linear infinite;
                    pointer-events: none;
                `;

                const duration = Math.random() * 10 + 10;
                petal.style.animationDuration = duration + 's';

                petalsContainer.appendChild(petal);

                setTimeout(() => {
                    petal.remove();
                }, duration * 1000);
            }

            setInterval(createPetal, 3000);

            for (let i = 0; i < 5; i++) {
                setTimeout(createPetal, i * 800);
            }
        }

        // 倒计时功能
        class CountdownTimer {
            constructor(targetDate) {
                this.targetDate = new Date(targetDate).getTime();
                this.interval = null;
                this.init();
            }

            init() {
                this.updateCountdown();
                this.interval = setInterval(() => this.updateCountdown(), 1000);
            }

            updateCountdown() {
                const now = new Date().getTime();
                const distance = this.targetDate - now;

                if (distance < 0) {
                    this.handleCountdownComplete();
                    return;
                }

                const days = Math.floor(distance / (1000 * 60 * 60 * 24));
                const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                const seconds = Math.floor((distance % (1000 * 60)) / 1000);

                this.updateDisplay(days, hours, minutes, seconds);
            }

            updateDisplay(days, hours, minutes, seconds) {
                document.getElementById('days').textContent = this.padZero(days);
                document.getElementById('hours').textContent = this.padZero(hours);
                document.getElementById('minutes').textContent = this.padZero(minutes);
                document.getElementById('seconds').textContent = this.padZero(seconds);
            }

            padZero(num) {
                return num < 10 ? '0' + num : num;
            }

            handleCountdownComplete() {
                clearInterval(this.interval);
                document.querySelector('.countdown-display').innerHTML = `
                    <div style="grid-column: 1 / -1; text-align: center;">
                        <div style="font-size: 3rem; color: var(--emphasis-color); margin-bottom: 1rem;">
                            🎉 时间到了！🎉
                        </div>
                        <div style="font-size: 1.5rem; color: var(--accent-color);">
                            期待美好的相见！
                        </div>
                    </div>
                `;

                // 添加庆祝效果
                this.createCelebration();
            }

            createCelebration() {
                for (let i = 0; i < 20; i++) {
                    setTimeout(() => {
                        this.createFallingHeart();
                    }, i * 200);
                }
            }

            createFallingHeart() {
                const heart = document.createElement('div');
                heart.className = 'falling-heart';
                heart.innerHTML = ['❤️', '💕', '💖', '💗', '💝'][Math.floor(Math.random() * 5)];
                heart.style.left = Math.random() * 100 + '%';
                heart.style.animationDuration = (Math.random() * 5 + 5) + 's';
                heart.style.fontSize = (Math.random() * 1.5 + 1) + 'rem';

                document.getElementById('fallingHearts').appendChild(heart);

                setTimeout(() => {
                    heart.remove();
                }, 10000);
            }
        }

        // 创建飘落的爱心
        function createFallingHeart() {
            const heart = document.createElement('div');
            heart.className = 'falling-heart';
            heart.innerHTML = ['❤️', '💕', '💖', '💗', '💝'][Math.floor(Math.random() * 5)];
            heart.style.left = Math.random() * 100 + '%';
            heart.style.animationDuration = (Math.random() * 5 + 10) + 's';
            heart.style.fontSize = (Math.random() * 1.5 + 1) + 'rem';

            document.getElementById('fallingHearts').appendChild(heart);

            setTimeout(() => {
                heart.remove();
            }, 15000);
        }

        // 定期创建飘落的爱心
        setInterval(createFallingHeart, 3000);

        // 初始化倒计时
        const countdown = new CountdownTimer('2025-10-26T11:21:00');

        // 添加页面可见性处理
        document.addEventListener('visibilitychange', function() {
            if (document.hidden) {
                document.querySelectorAll('.falling-heart').forEach(heart => {
                    heart.style.animationPlayState = 'paused';
                });
            } else {
                document.querySelectorAll('.falling-heart').forEach(heart => {
                    heart.style.animationPlayState = 'running';
                });
            }
        });

        console.log('双向奔赴倒计时页面已加载完成 💕');
    </script>
</body>
</html>